<!-- 机器 -->
<template>
    <a-row>
        <a-row class='mytitle'>
            <router-link :to='{name:"index"}'><a-icon type="arrow-left" style="color:var(--themeColor);margin-right:0.5em" /></router-link>
            {{$t('Machine')}}
        </a-row>

        <NoAuthPage v-showNoAuth="'A3-1'" />

        <a-row style="margin:1em" v-userAuth="'A3-1'">
            <a-card hoverable>
                <div style="margin:0 0 1em 0 ">
                    <!-- <a-tooltip placement='bottom'>
                        <template slot='title'>
                            <span>{{$t('Edit')}}</span>
                        </template>
                        <a-button type='primary' icon='form' @click="openmodal('modify')"></a-button>
                    </a-tooltip> -->
                    <!-- <a-tooltip placement='bottom'>
                        <template slot='title'>
                            <span>{{$t('Delete')}}</span>
                        </template>
                        <a-button type='danger' style="margin-left:1em" icon='close-circle' @click="openmodal('deluser')"></a-button>
                    </a-tooltip> -->
                </div>
                <a-table class="tabstyle" :columns="columns" :dataSource="machinedata" size="small" rowKey="id" 
                         :pagination='pagination' :locale="defaultSetting">
                    <!-- :rowSelection='{type:"radio",onSelect:onSelectone}' -->
                </a-table>
            </a-card>
        </a-row>

        <a-modal :title="$t('Edit') + $t('Machine') + ' { '+records.hostname+' } ' + $t('Configuration')" v-model="modify" @cancel='cancelhandle' width='35%' @ok='submodify' :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
    		<a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
            <a-table :columns="stylecol" :dataSource="styledata" bordered :pagination='pagination' size='small' :locale="defaultSetting">
            <!-- 编辑子用户 -->
                <template slot="operation" slot-scope="text, record, index">
                    <div class="editable-row-operations">
                  
                        <!-- 删除子用户 -->
                        <a-popconfirm
                        v-if="styledata.length"
                        title="Sure to delete?"
                        @confirm="() => onDelete(record)"
                        >
                        <a href="javascript:;">Delete</a>
                        </a-popconfirm>
                    </div>
                </template>
            </a-table>

            <!-- 添加款式 -->
            <a-button class="editable-add-btn" @click="handleAdd">{{$t('Add')}}</a-button>

            <div id="components-form-demo-advanced-search" v-if="flag">
            <a-form :form="form" class="ant-advanced-search-form">
                <a-row :gutter="24">
                <a-col :span="8">
                    <a-form-item :label="$t('Case_view')" has-feedback>
                        <a-select v-decorator="['key',{
                                rules:[{required:true,message:$t('Choose')+ $t('Case_view')}]
                            }]"
                        >
                            <a-select-option :value="item" :key="index" v-for="(item,index) in views">{{item}}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item :label="$t('Disk_location_line')" has-feedback>
                    <a-input-number :min="1"
                        v-decorator="['row',{
                                rules:[{required:true,message:$t('Enter')+ $t('Disk_location_line') + '(X)'}]
                            }]"
                    ></a-input-number>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item :label="$t('Disk_location_column')" has-feedback>
                    <a-input-number :min="1"
                        v-decorator="['column',{
                                rules:[{required:true,message:$t('Enter')+ $t('Disk_location_line') + '(Y)'}]
                            }]"
                    ></a-input-number>
                    </a-form-item>
                </a-col>
                </a-row>
                <a-row>
                <a-col :span="24" :style="{ textAlign: 'right' }">
                    <a-button type="primary" @click="sureadd">{{$t('Add')}}</a-button>
                    <!-- <a-button type="default" :style="{ marginLeft: '8px' }" @click="handleReset">{{$t('Clear')}}</a-button> -->
                    <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="flag=false">{{$t('Finished')}}</a>
                </a-col>
                </a-row>
            </a-form>
            </div>

		</a-modal>
    </a-row>
</template>
<script>
import EmptyData from '@/components/common/EmptyData'
import NoAuthPage from '@/components/common/NoAuthPage'

import request from '@/request/request'

export default {
    name:'',
    components: { EmptyData, NoAuthPage },
    data(){
        return{
            columns:[
                {title: this.$t('Host')+ this.$t('Name'),dataIndex:'hostname',key:'hostname'},
                {title: this.$t('Addr'),dataIndex:'addr',key:'addr'},
                {title: this.$t('Motherboard'),dataIndex:'board',key:'board'},
                {title: this.$t('Kernel'),dataIndex:'kernel',key:'kernel'},
                {title: this.$t('System'),dataIndex:'system',key:'system'}
            ],
            stylecol:[
                {title: this.$t('Case_view'),dataIndex:'key',key:'key'},
                {title: this.$t('Disk_location_line'),dataIndex:'row',key:'row'},
                {title: this.$t('Disk_location_column'),dataIndex:'column',key:'column'},
                {
                    title: "operation",
                    dataIndex: "operation",
                    key: "operation",
                    scopedSlots: { customRender: "operation" }
                }
            ],
            selectedRowKeys:[],
            form:this.$form.createForm(this),
            pagination:{
                defaultPageSize:10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger:true,
                pageSizeOptions: ['10', '15', '20'],
                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            formlayout:{
                labelCol:{span:6},
                wrapperCol:{span:16}
            },
            machinedata:[],
            create:false,
            modify:false,
            records:'',
            ids:'',
            styledata:[],
            flag: false,
            views:[],
            spinning:false,
            defaultSetting: {emptyText:<EmptyData />}
        }
    },
    computed:{
        getlanguage(){
            return this.$store.state.language
        }
    },
    watch: {
        getlanguage(val){  //监听语言切换，切换data组件内的多语言
            this.columns = [
                {title: this.$t('Host')+ this.$t('Name'),dataIndex:'hostname',key:'hostname'},
                {title: this.$t('Addr'),dataIndex:'addr',key:'addr'},
                {title: this.$t('Motherboard'),dataIndex:'board',key:'board'},
                {title: this.$t('Kernel'),dataIndex:'kernel',key:'kernel'},
                {title: this.$t('System'),dataIndex:'system',key:'system'}
            ]
            this.stylecol = [
                {title: this.$t('Case_view'),dataIndex:'key',key:'key'},
                {title: this.$t('Disk_location_line'),dataIndex:'row',key:'row'},
                {title: this.$t('Disk_location_column'),dataIndex:'column',key:'column'},
                {
                    title: "operation",
                    dataIndex: "operation",
                    key: "operation",
                    scopedSlots: { customRender: "operation" }
                }
            ]
        },
    },
    methods:{
        getdata(){
            request('get', 'ops/conf/db/machine').then(res=>{
                // console.log('获取机器',res)
                this.machinedata = res.data
                // if(this.records !== ''){
                //     this.records = res.data[this.ids]  //选中的一条信息
                // }
            })
        },
        onSelectone(record, selected, selectedRows){
            this.records = record  //选中的一条信息
            if(this.styledata.style) {
                this.styledata =  this.records.style
            }
            this.getviews(this.styledata)
            // for(var i=0;i<this.machinedata.length;i++){
            //     if(this.records == this.machinedata[i])
            //     this.ids = i
            // }
        },
        submodify(e){
            this.spinning = true
            e.preventDefault();
            request('put', 'ops/conf/db/machine',{
                id:this.records.id,
                style:this.styledata
            }).then(res=>{
                this.form.resetFields();
                this.spinning = false
                this.modify=false
                this.flag = false;
                this.getdata()
            })
            // this.form2.validateFields((err,value)=>{
            // if(!err){
            //        this.$axios.put(this.allurl+'ops/conf/db/machine',{
            //            id:this.records.id,
            //            style:this.styledata
            //        }).then(res=>{
            //            this.form.resetFields();
            //            this.modify=false
            //            this.getdata()
            //        })
            //     }
            // })
        },
        cancelhandle(e){
            this.create=false
            this.modify=false
            this.spinning=false
            this.flag = false;
            this.form.resetFields();
        },
        openmodal(name){
            if(this.records !== ''){
                if(name=='deluser'){
                    this.deluser()
                }else if(name == 'modify'){
                    this.modify = true
                }
            }
            else{
                this.$notification['error']({
                    message: this.$t('Choose')+this.$t('Operating-object')
                })
            }
            
        },
        deluser(){
            let _this = this
            this.$confirm({
                title: this.$t('Delete'),
                content: this.$t('Sure-to-del') +this.records.hostname+' ？',
                cancelText:this.$t('Cancel'),
                okText:this.$t('Sure'),
                okType:'danger',
                onOk(){
                    request('DELETE', 'ops/conf/db/machine',{
                        // data:{
                            id:_this.records.id
                        // }
                    }).then(res=>{
                        // console.log('lllllllllll',res)
                        _this.getdata()
                        _this.model(res.data.id) //返回模板
						_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示 
						// _this.gettask()  //任务栏信息
                    })
                },
                onCancel(){
                }
            })
        },
        handleAdd() {
            this.flag = true;
        },
        sureadd(e) {
            e.preventDefault();
            this.form.validateFields((err, value) => {
                if (!err) {
                    const { styledata } = this;
                    const newData = {
                        key:value.key,
                        row:value.row,
                        column:value.column,
                        num:value.column * value.row
                    }
                    this.styledata = [...styledata, newData];
                    this.form.resetFields();
                    this.getviews(this.styledata)
                }
            });
        },
        onDelete(key) {
            const newData = [...this.styledata];
            this.styledata = newData.filter(item => item !== key);
            this.getviews(this.styledata)
        },
        getviews(base){
            const list = ['face','top','left','right','back','bottom']
            const basedata = []
            for (const item of base) {
                basedata.push(item.key)
            }
            this.views = list.filter(items => {
                if (!basedata.includes(items)) 
                    return items;
            })
        }
    },
    mounted(){
        this.getdata()
    },
    destroyed() {
        this.create = false;
        this.modify = false;
        this.flag = false;
        this.spinning = false;
    },
}
</script>
